<template>
  <div>
    <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" :close-on-click-modal="false"
               append-to-body top="5vh" width="80%">
      <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
               size="small"
               label-width="120px">
        <el-tabs v-model="tabsSelectedId" type="card">
          <el-tab-pane label="基本信息" name="1">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="editInfo.data.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="editInfo.data.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="editInfo.data.birthday"
                    type="date"
                    placeholder="生日"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="民族" prop="nation">
                  <el-select
                    v-model="editInfo.data.nation"
                    placeholder="民族"
                    clearable
                    size="small">
                    <el-option
                      v-for="dict in nationOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状态" prop="maritalStatus">
                  <el-select v-model="editInfo.data.maritalStatus" placeholder="请选择婚姻状态">
                    <el-option label="请选择婚姻状况" value=""></el-option>
                    <el-option v-for="(item, index) in marryAllListData"
                               :key="`maritalStatus${index}`"
                               :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证" prop="certNo">
                  <el-input v-model="editInfo.data.certNo" placeholder="请输入身份证号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-input v-model="editInfo.data.nativePlace" placeholder="请输入籍贯"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户籍" prop="householdRegister">
                  <el-input v-model="editInfo.data.householdRegister" placeholder="请输入户籍"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政治面貌" prop="politicalStatus">
                  <el-select v-model="editInfo.data.politicalStatus" placeholder="请选择政治面貌">
                    <el-option label="请选择政治面貌" value=""></el-option>
                    <el-option v-for="(item, index) in politicalAllListData"
                               :key="`politicalStatus${index}`"
                               :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信" prop="wechatId">
                  <el-input v-model="editInfo.data.wechatId" placeholder="请输入微信号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="editInfo.data.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="editInfo.data.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学历" prop="education">
                  <el-select v-model="editInfo.data.education" placeholder="请选择学历">
                    <el-option label="请选择学历" value=""></el-option>
                    <el-option v-for="(item, index) in educationAllListData"
                               :key="`${item.postName}${index}`"
                               :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业" prop="professional">
                  <el-input v-model="editInfo.data.professional" placeholder="请输入专业"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="毕业院校" prop="graduatedUniversity">
                  <el-input v-model="editInfo.data.graduatedUniversity" placeholder="请输入毕业院校"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="家庭住址" prop="address">
                  <el-input type="textarea" v-model="editInfo.data.address" rows="1" placeholder="请输入家庭住址"
                            style="width: 480px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急联系人" prop="emergencyContact">
                  <el-input v-model="editInfo.data.emergencyContact" placeholder="请输入紧急联系人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
                  <el-input v-model="editInfo.data.emergencyContactPhone" placeholder="请输入紧急联系人电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入职日期" prop="onboardingDate">
                  <el-date-picker
                    v-model="editInfo.data.onboardingDate"
                    type="date"
                    placeholder="入职日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="离职日期" prop="leaveDate">
                  <el-date-picker
                    :disabled="true"
                    v-model="editInfo.data.leaveDate"
                    type="date"
                    placeholder="离职日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门" prop="deptId">
                  <tree-select v-model="editInfo.data.deptId" :options="departmentAllListData"
                               :normalizer="treeSelectProps"
                               placeholder="选择部门"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职务:" prop="postId">
                  <el-select v-model="editInfo.data.postId" placeholder="请选择职务">
                    <el-option label="请选择职务" value=""></el-option>
                    <el-option v-for="(item, index) in jobAllListData"
                               :key="`${item.postName}${index}`"
                               :label="item.postName"
                               :value="item.postId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="自我评价" prop="selfEvaluation">
                  <el-input type="textarea" v-model="editInfo.data.selfEvaluation" rows="3"
                            placeholder="请输入自我评价"
                            style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="教育经历" prop="educationExperience">
                  <el-input type="textarea" v-model="editInfo.data.educationExperience" rows="3"
                            placeholder="请输入教育经历（例：2008.9-2012.6 某某大学）"
                            style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作经历" prop="workExperience">
                  <el-input type="textarea" v-model="editInfo.data.workExperience" rows="3"
                            placeholder="请输入工作经历（例：2012.6-2015.6 某某公司）"
                            style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--<el-form-item label="状态" prop="status">
              <el-radio-group v-model="editInfo.data.status" style="width: 178px;">
                <el-radio :label="0">在职</el-radio>
                <el-radio :label="1">离职</el-radio>
              </el-radio-group>
            </el-form-item>-->
          </el-tab-pane>
          <el-tab-pane label="社保信息" name="2">
            <!--<el-form-item label="社保公积金个人小计(元)" prop="securityHousingPersonal" label-width="200px">
              <el-input v-model="editInfo.data.securityHousingPersonal" placeholder="请输入社保公积金个人小计"
                        style="width: 178px;"></el-input>
            </el-form-item>
            <el-form-item label="社保公积金企业小计(元)" prop="securityHousingEnterprise" label-width="200px">
              <el-input v-model="editInfo.data.securityHousingEnterprise" placeholder="请输入社保公积金企业小计"
                        style="width: 178px;"></el-input>
            </el-form-item>-->
            <el-row>
              <el-col :span="8">
                <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">社保基数</div>
                <el-form-item label="养老保险缴纳基数(元)" prop="endowmentInsuranceBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.endowmentInsuranceBase" placeholder="请输入养老保险缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="医疗保险缴纳基数(元)" prop="medicalInsuranceBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.medicalInsuranceBase" placeholder="请输入医疗保险缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="工伤保险缴纳基数(元)" prop="inductrialInjuryInsuranceBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.inductrialInjuryInsuranceBase" placeholder="请输入工伤保险缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="失业保险缴纳基数(元)" prop="unemploymentInsuranceBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.unemploymentInsuranceBase" placeholder="请输入失业保险缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="生育保险缴纳基数(元)" prop="birthInsuranceBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.birthInsuranceBase" placeholder="请输入生育保险缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="住房公积金缴纳基数(元)" prop="housingProvidentFundBase" label-width="180px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.housingProvidentFundBase" placeholder="请输入住房公积金缴纳基数"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="社保服务费(元)" prop="securityCharge" label-width="180px" style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.securityCharge" placeholder="请输入社保服务费"
                            @blur="computeMoney"></el-input>
                </el-form-item>
                <el-form-item label="社保缴纳地" prop="socialInsurancePlace" label-width="180px"
                              style="margin-bottom: 30px;">
                  <!--<el-input type="textarea" v-model="editInfo.data.socialInsurancePlace" rows="1" placeholder="请输入社保缴纳地"
                            style="width: 480px;"></el-input>-->
                  <!-- <el-cascader style="width: 268px;"
                                v-model="editInfo.data.socialInsurancePlace"
                                :options="propsSocialInsurancePlace"
                   ></el-cascader>-->
                  <tree-select v-model="editInfo.data.socialInsurancePlace" :options="areaAllListData"
                               :normalizer="treeSelectProps"
                               placeholder="选择社保缴纳地"
                               style="width: 100%;"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">个人实际缴纳</div>
                <el-form-item label="养老保险个人缴纳(元)" prop="endowmentInsuranceP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.endowmentInsuranceP" placeholder="" @blur="computeMoney"
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="医疗保险个人缴纳(元)" prop="medicalInsuranceP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.medicalInsuranceP" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="工伤保险个人缴纳(元)" prop="inductrialInjuryInsuranceP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.inductrialInjuryInsuranceP" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="失业保险个人缴纳(元)" prop="unemploymentInsuranceP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.unemploymentInsuranceP" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="生育保险个人缴纳(元)" prop="birthInsuranceP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.birthInsuranceP" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="公积金个人缴纳(元)" prop="housingProvidentFundP" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.housingProvidentFundP" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="个人缴纳合计(元)" prop="securityHousingPersonal" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.securityHousingPersonal" placeholder="" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="合计(元)" prop="securityHousingSum" label-width="160px" style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.securityHousingSum" placeholder="" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">企业实际缴纳</div>
                <el-form-item label="养老保险企业缴纳(元)" prop="endowmentInsuranceE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.endowmentInsuranceE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="医疗保险企业缴纳(元)" prop="medicalInsuranceE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.medicalInsuranceE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="工伤保险企业缴纳(元)" prop="inductrialInjuryInsuranceE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.inductrialInjuryInsuranceE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="失业保险企业缴纳(元)" prop="unemploymentInsuranceE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.unemploymentInsuranceE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="生育保险企业缴纳(元)" prop="birthInsuranceE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.birthInsuranceE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="公积金企业缴纳(元)" prop="housingProvidentFundE" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.housingProvidentFundE" @blur="computeMoney" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="企业缴纳合计(元)" prop="securityHousingEnterprise" label-width="160px"
                              style="margin-bottom: 30px;">
                  <el-input v-model="editInfo.data.securityHousingEnterprise" placeholder=""
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--
            	描述：新加六险一金
            -->
            <!--<el-form-item label="大病保险个人缴纳(元)" prop="seriousIllnessInsuranceP" label-width="160px"
                          style="margin-bottom: 30px;">
              <el-input v-model="editInfo.data.seriousIllnessInsuranceP" @blur="computeMoney" placeholder="" :disabled="true"
                        style="width: 158px;"></el-input>
            </el-form-item>

            <el-form-item label="大病保险企业缴纳(元)" prop="seriousIllnessInsuranceE" label-width="160px">
              <el-input v-model="editInfo.data.seriousIllnessInsuranceE" @blur="computeMoney" placeholder="" :disabled="true"
                        style="width: 158px;"></el-input>
            </el-form-item>-->
          </el-tab-pane>
          <el-tab-pane label="合同信息" name="3">
            <el-row>
              <el-col :span="8">
                <el-form-item label="合同开始日期" prop="contractBeginDate">
                  <el-date-picker
                    v-model="editInfo.data.contractBeginDate"
                    type="date"
                    placeholder="合同开始日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同结束日期" prop="contractEndDate">
                  <el-date-picker
                    v-model="editInfo.data.contractEndDate"
                    type="date"
                    placeholder="合同结束日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同签订日期" prop="contractSignDate">
                  <el-date-picker
                    v-model="editInfo.data.contractSignDate"
                    type="date"
                    placeholder="合同签订日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同年限" prop="contractYear">
                  <!--<el-input v-model.number="editInfo.data.contractYear" placeholder="请输入合同年限"></el-input>-->
                  <el-select v-model="editInfo.data.contractYear" placeholder="请选择">
                    <el-option
                      v-for="item in contractYears"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="商业险" name="4">
            <el-row>
              <el-col :span="24">
                <el-form-item label="是否缴纳商业险	" prop="payBusinessInsurance" label-width="150px">
                  <el-switch
                    v-model="editInfo.data.payBusinessInsurance"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="editInfo.data.payBusinessInsurance === 1">
                <el-form-item label="保险公司名称" prop="businessInsuranceCompany" label-width="150px">
                  <el-input v-model="editInfo.data.businessInsuranceCompany" placeholder="请输入保险公司名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="editInfo.data.payBusinessInsurance === 1">
                <el-form-item label="保险开始日期" prop="businessInsuranceBegin" label-width="150px">
                  <el-date-picker
                    v-model="editInfo.data.businessInsuranceBegin"
                    type="date"
                    placeholder="保险开始日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="editInfo.data.payBusinessInsurance === 1">
                <el-form-item label="保险结束日期" prop="businessInsuranceEnd">
                  <el-date-picker
                    v-model="editInfo.data.businessInsuranceEnd"
                    type="date"
                    placeholder="保险结束日期"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商业险金额(元)" prop="businessInsuranceSal" label-width="150px"
                              v-if="editInfo.data.payBusinessInsurance === 1">
                  <el-input v-model="editInfo.data.businessInsuranceSal" placeholder="请输入商业险（金额）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="材料信息" name="5">
            <el-row>
              <el-form-item label="劳务合同" prop="laborContractUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.laborContractListData"
                            :key="`laborContract${index}`">
                          <p>{{item.fileName}}</p>
                          <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleExportLaborContract(item.id)"><i
                            class="el-icon-download"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveLaborContract(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="laborContract-box"
                         style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-laborContract" class="el-upload el-upload--picture-card"
                           style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传PDF文档！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="简历照片(二寸)" prop="photoUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.photoListData"
                            :key="`photoUrl${index}`">
                          <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                               class="el-upload-list__item-thumbnail">
                          <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemovePhoto(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="photo-box"
                         style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-photo" class="el-upload el-upload--picture-card" style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传图片！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="证件照片" prop="idPhotoUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.idPhotoListData"
                            :key="`idPhoto${index}`">
                          <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                               class="el-upload-list__item-thumbnail">
                          <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveIdPhoto(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="idPhoto-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-idPhoto" class="el-upload el-upload--picture-card" style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传图片！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="离职证明" prop="certLeaveUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.certLeaveListData"
                            :key="`certLeave${index}`">
                          <p>{{item.fileName}}</p>
                          <div class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handleExportCertLeave(item.id)"><i
                          class="el-icon-download"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveCertLeave(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="certLeave-box"
                         style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-certLeave" class="el-upload el-upload--picture-card"
                           style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传word或者PDF文档！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="个人简历" prop="resumeUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.resumeListData"
                            :key="`resume${index}`">
                          <p>{{item.fileName}}</p>
                          <div class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handleExportResume(item.id)"><i
                          class="el-icon-download"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveResume(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="resume-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-resume" class="el-upload el-upload--picture-card" style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传word或者PDF文档！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <!--<el-row>

            </el-row>-->
            <el-row>
              <el-form-item label="学位证书" prop="diplomaUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.diplomaListData"
                            :key="`diploma${index}`">
                          <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                               class="el-upload-list__item-thumbnail">
                          <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveDiploma(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="diploma-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-diploma" class="el-upload el-upload--picture-card" style="display: inline-block;">
                        <i
                          class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传图片！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="毕业证书" prop="graduationCertificatUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.graduationCertificatListData"
                            :key="`graduationCertificat${index}`">
                          <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                               class="el-upload-list__item-thumbnail">
                          <div class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview"
                                  @click="handleViewBigPic(item.id)"><i
                              class="el-icon-zoom-in"></i></span>
                            <span class="el-upload-list__item-delete"
                                  @click="handleRemoveGraduationCertificat(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="graduationCertificat-box"
                         style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-graduationCertificat" class="el-upload el-upload--picture-card"
                           style="display: inline-block;"><i
                        class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传图片！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="其他附件" prop="otherAccessoryUrl">
                <el-row>
                  <el-col :span="24">
                    <div style="display: inline-block;float:left;">
                      <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                        <li tabindex="0" class="el-upload-list__item"
                            v-for="(item,index) in editInfo.data.otherAccessoryListData"
                            :key="`otherAccessory${index}`" v-if="editInfo.data.otherAccessoryUrl">
                          <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                               class="el-upload-list__item-thumbnail">
                          <div class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                              class="el-icon-zoom-in"></i></span>
                            <span class="el-upload-list__item-delete" @click="handleRemoveOtherAccessory(index)"><i
                              class="el-icon-delete"></i></span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div id="otherAccessory-box"
                         style="position: relative; display: inline-block; width: 70px; height: 70px;">
                      <div id="upload-otherAccessory" class="el-upload el-upload--picture-card"
                           style="display: inline-block;"><i
                        class="el-icon-plus"></i>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div style="color: #999;">提示：请上传图片！</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="薪资" name="6">
            <el-row>
              <el-col :span="12">
                <el-form-item label="银行卡" prop="bankNo">
                  <el-input v-model="editInfo.data.bankNo" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行" prop="openingBank">
                  <el-input v-model="editInfo.data.openingBank" placeholder="请输入开户行"></el-input>
                  <!--<el-select v-model="editInfo.data.openingBank" placeholder="请选择开户行">
                    <el-option label="请选择开户行" value=""></el-option>
                    <el-option v-for="(item, index) in bankAllListData" :key="`${item.postName}${index}`"
                               :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>-->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="基础工资(元)" prop="salaryBase">
                  <el-input v-model="editInfo.data.salaryBase" placeholder="请输入基础工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="绩效工资(元)" prop="salaryAssessment">
                  <el-input v-model="editInfo.data.salaryAssessment" placeholder="请输入绩效工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位工资(元)" prop="salaryPost">
                  <el-input v-model="editInfo.data.salaryPost" placeholder="请输入岗位工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="津贴(元)" prop="salaryAllowance">
                  <el-input v-model="editInfo.data.salaryAllowance" placeholder="请输入津贴"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="viewBigPicInfo.visible" append-to-body>
      <div style="text-align: center;">
        <img :src="`${basePicPath}/tool/file/view?fileId=${viewBigPicInfo.url}`" alt=""
             style="display: inline-block; max-width: 100%;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import { basePicPath } from '@/config/config'
  import { isJSON } from '@/utils/utils'
  import { isIdentityCard } from '@/utils/validateIdcard'
  import { validBankNo } from '@/utils/validate'
  import { createRecordAPI, updateRecordAPI } from '@/api/employee/record'
  import { findAllProvince, findCityByProvince } from '@/api/system/address'
  import isMobilePhone from 'validator/lib/isMobilePhone'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import upload from '@/mixins/upload'
  import { listArea, getArea, treeselect, delArea, addArea, updateArea } from '@/api/system/area'
  import commonMixins from '@/mixins/common'
  import request from '@/utils/request'

  export default {
    name: 'RecordEdit',
    mixins: [upload, commonMixins],
    components: {
      TreeSelect
    },
    data() {
      let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/

      return {
        areaOptions: [],
        nationOptions: [],
        basePicPath,
        dialog: {
          status: 'create',
          visible: false, // 是否显示
          title: '添加'
        },
        contractYears: [{
          value: '1',
          label: '1年'
        }, {
          value: '2',
          label: '2年'
        }, {
          value: '3',
          label: '3年'
        }, {
          value: '4',
          label: '4年'
        }, {
          value: '5',
          label: '5年'
        }],

        maritalStatusArr: [{
          value: '0',
          label: '未婚'
        }, {
          value: '1',
          label: '已婚'
        }, {
          value: '2',
          label: '离异'
        }, {
          value: '3',
          label: '丧偶'
        }],

        formParams: { // 编辑需要的参数
          name: '', // 姓名
          certNo: '', // 身份证号
          phone: '', // 电话
          gender: 1, // 性别 1男 2 女
          email: '', // 邮箱
          bankNo: '', // 银行卡号
          socialInsurancePlace: '', // 社保缴纳地
          graduatedUniversity: '', // 毕业院校
          emergencyContact: '', // 紧急联系人
          emergencyContactPhone: '', // 紧急联系人电话
          address: '', // 家庭住址
          openingBank: '', // 开户行
          deptId: null, // 所属部门
          postId: null, // 职务
          status: 0, // 状态 0 在职 1 离职
          onboardingDate: '', // 入职日期
          leaveDate: '', // 离职日期
          contractBeginDate: '', // 劳动合同开始日
          contractEndDate: '', // 劳动合同结束日
          workExperience: '', // 工作经历
          educationExperience: '', // 教育经历
          salaryBase: '', // 基础工资
          salaryAssessment: '', // 绩效工资
          salaryPost: '', // 岗位工资
          salaryAllowance: '', // 津贴
          securityHousingEnterprise: '', // 社保公积金企业小计
          securityHousingPersonal: '', // 社保公积金个人小计
          securityHousingSum: '', // 合计
          securityCharge: '', // 社保服务费
          securityBase: '', // 社保基数
          payBusinessInsurance: '', // 是否缴纳商业保险 0 未缴纳 1 缴纳
          businessInsuranceSal: '', // 商业保险缴纳金额
          photoListData: [], // 二寸照片列表
          photoUrl: '', // 二寸照片
          idPhotoListData: [], // 证件照片列表
          idPhotoUrl: '', // 证件照片
          certLeaveListData: [], // 离职证明列表
          certLeaveUrl: '', // 离职证明
          resumeListData: [], //
          resumeUrl: '', // 个人简历
          laborContractListData: [], //
          laborContractUrl: '', // 劳务合同
          diplomaListData: [], // 学位证书
          diplomaUrl: '', // 学位证书
          graduationCertificatListData: [], // 毕业证书
          graduationCertificatUrl: '', // 毕业证书
          otherAccessoryListData: [], // 其他附件地址
          otherAccessoryUrl: '', // 其他附件地址
          role: 0,// 角色 普通、负责人、助手

          //新加字段
          education: '',
          birthday: '',
          nativePlace: '',
          householdRegister: '',
          nation: '',
          professional: '',
          selfEvaluation: '',
          maritalStatus: '',
          endowmentInsuranceP: '',
          endowmentInsuranceE: '',
          medicalInsuranceP: '',
          medicalInsuranceE: '',
          inductrialInjuryInsuranceP: '',
          inductrialInjuryInsuranceE: '',
          unemploymentInsuranceP: '',
          unemploymentInsuranceE: '',
          birthInsuranceP: '',
          birthInsuranceE: '',
          seriousIllnessInsuranceP: '',
          seriousIllnessInsuranceE: '',
          housingProvidentFundP: '',
          housingProvidentFundE: '',
          wechatId: '',
          politicalStatus: '',
          contractSignDate: '',
          contractYear: '',

          endowmentInsuranceBase: '',
          medicalInsuranceBase: '',
          inductrialInjuryInsuranceBase: '',
          unemploymentInsuranceBase: '',
          birthInsuranceBase: '',
          housingProvidentFundBase: '',

          businessInsuranceCompany: '',
          businessInsuranceBegin: '',
          businessInsuranceEnd: ''

        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            name: [
              { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            certNo: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入身份证'))
                  } else if (!isIdentityCard(value)) {
                    callback(new Error('请输入有效的身份证'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            phone: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入手机号码'))
                  } else if (!isMobilePhone(value, 'zh-CN')) {
                    callback(new Error('请输入有效的手机号码'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            emergencyContact: [
              { required: true, message: '请输入紧急联系人', trigger: 'blur' }
            ],
            emergencyContactPhone: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入紧急联系人电话'))
                  } else if (!isMobilePhone(value, 'zh-CN')) {
                    callback(new Error('请输入有效的手机号码'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            email: [
              { required: true, message: '请输入邮箱', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
            ],
            bankNo: [
              {
                required: true, message: '银行卡号为20位以内数字(不允许空格)', trigger: 'blur', validator: (rule, value, callback) => {
                  if (!validBankNo(value)) {
                    callback(new Error('银行卡号为20位以内数字(不允许空格)'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            socialInsurancePlace: [
              { required: true, message: '请输入社保缴纳地', trigger: 'change' }
            ],
            graduatedUniversity: [
              { required: true, message: '请输入毕业院校', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入家庭住址', trigger: 'blur' }
            ],
            openingBank: [
              { required: true, message: '请输入开户行', trigger: 'blur' }
            ],
            deptId: [
              { required: true, message: '请选择所属部门', trigger: 'change' }
            ],
            postId: [
              { required: true, message: '请选择职务', trigger: 'change' }
            ],
            onboardingDate: [
              { required: true, message: '请选择入职日期', trigger: 'change' }
            ],
            workExperience: [
              { required: true, message: '请输入工作经历', trigger: 'blur' }
            ],
            educationExperience: [
              { required: true, message: '请输入输入教育经历', trigger: 'blur' }
            ],
            salaryBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入基础工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryAssessment: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入绩效工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryPost: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入岗位工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryAllowance: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入津贴工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityHousingEnterprise: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保公积金企业小计'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityHousingPersonal: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保公积金个人小计'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityCharge: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保服务费'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            photoUrl: [
              { required: true, message: '请上传简历照片(二寸)', trigger: 'blur' }
            ],
            endowmentInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            endowmentInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            seriousIllnessInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入大病保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            seriousIllnessInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入大病保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            housingProvidentFundP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            housingProvidentFundE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            endowmentInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            housingProvidentFundBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            nation: [
              { required: true, message: '请选择民族', trigger: 'blur' }
            ],
            education: [
              { required: true, message: '请填写学历', trigger: 'blur' }
            ],
            birthday: [
              { required: true, message: '请填写出生日期', trigger: 'blur' }
            ],
            nativePlace: [
              { required: true, message: '请填写籍贯', trigger: 'blur' }
            ],
            householdRegister: [
              { required: true, message: '请填写户籍', trigger: 'blur' }
            ],
            professional: [
              { required: true, message: '请填写专业', trigger: 'blur' }
            ],
            education: [
              { required: true, message: '请填写学历', trigger: 'blur' }
            ],
            selfEvaluation: [
              { required: true, message: '请填写自我评价', trigger: 'blur' }
            ],
            maritalStatus: [
              { required: true, message: '请填写婚姻状态', trigger: 'change' }
            ],
            wechatId: [
              { required: true, message: '请填写微信号', trigger: 'blur' }
            ],
            politicalStatus: [
              { required: true, message: '请填写政治面貌', trigger: 'blur' }
            ],
            contractBeginDate: [
              { required: true, message: '请选择合同开始日期', trigger: 'change' }
            ],
            contractEndDate: [
              { required: true, message: '请选择合同结束日期', trigger: 'change' }
            ],
            contractSignDate: [
              { required: true, message: '请选择合同签订日期', trigger: 'change' }
            ],
            contractYear: [
              { required: true, message: '请输入合同年限', trigger: 'blur' }
            ],
            laborContractUrl: [
              { required: true, message: '请选择上传劳务合同', trigger: 'change' }
            ]
          },
          disabled: false, // 处理编辑，某些项禁止编辑
          resumeInstance: undefined,
          certLeaveInstance: undefined, // 离职证明
          laborContractInstance: undefined, // 劳务合同
          diplomaInstance: undefined, // 学位证书
          graduationCertificatInstance: undefined, // 毕业证书
          otherAccessoryInstance: undefined, // 其他附件
          idPhotoInstance: undefined, // 证件照片
          photoInstance: undefined // 证件照片
        },
        viewBigPicInfo: { // 查看大图
          visible: false,
          url: ''
        },
        tabsSelectedId: '1', // tab页面
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: false
          }
        },
        detailInfo: null,
        propsSocialInsurancePlace: [],

        ebirth: 0,
        ehousing: 0,
        einjury: 0,
        eloseJob: 0,
        emedical: 0,
        epension: 0,
        pbirth: 0,
        phousing: 0,
        pinjury: 0,
        pmedical: 0,
        ploseJob: 0,
        ppension: 0
      }
    },
    props: {

      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      departmentAllListData: { // 部门下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      jobAllListData: { // 下拉的职位列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      areaAllListData: {
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      educationAllListData: {
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      bankAllListData: {
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      politicalAllListData: {
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      marryAllListData: {
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {

      //add by yyf  省市区选择变化
      // 不用，废弃该方法
      /*handleSocialInsurancePlaceChange(value){
        console.log(value);
      },*/

      filesToString(data = []) { // 附件列表转成字符串
        data = data || []
        let files = data.map((item) => {
          return JSON.stringify(item)
        })
        return files.join('@@**%%')
      },
      filesToArray(data = '') { // 附件列表转成数组
        if (!data || data === 'null' || data === 'undefined') {
          return []
        } else {
          let files = data.split('@@**%%')
          files = files.filter((item) => {
            return isJSON(item)
          })
          return files.map((item) => {
            return JSON.parse(item)
          })
        }
      },
      handleTabChange(data) {
        // console.log(data)
        if (data['name'] || data['birthday'] || data['nation'] || data['maritalStatus'] || data['certNo'] || data['nativePlace'] || data['householdRegister'] || data['politicalStatus'] || data['wechatId'] || data['phone'] || data['email'] || data['education'] || data['professional'] || data['graduatedUniversity'] || data['address'] || data['emergencyContact'] || data['emergencyContactPhone'] || data['onboardingDate'] || data['deptId'] || data['postId'] || data['selfEvaluation'] || data['workExperience'] || data['educationExperience']) {
          this.tabsSelectedId = '1'
        } else if (data['securityBase'] || data['socialInsurancePlace'] || data['endowmentInsuranceP'] || data['endowmentInsuranceE'] || data['medicalInsuranceP'] || data['medicalInsuranceE'] || data['inductrialInjuryInsuranceP'] || data['inductrialInjuryInsuranceE'] || data['unemploymentInsuranceP'] || data['unemploymentInsuranceE'] || data['seriousIllnessInsuranceP'] || data['seriousIllnessInsuranceE'] || data['birthInsuranceP'] || data['birthInsuranceE'] || data['housingProvidentFundP'] || data['housingProvidentFundE'] || data['securityHousingPersonal'] || data['securityHousingEnterprise'] || data['securityCharge'] || data['securityHousingSum']) {
          this.tabsSelectedId = '2'
        } else if (data['contractBeginDate'] || data['contractEndDate'] || data['contractSignDate'] || data['contractYear']) {
          this.tabsSelectedId = '3'
        } else if (data['laborContractUrl'] || data['photoUrl']) {
          this.tabsSelectedId = '5'
        } else if (data['bankNo'] || data['openingBank'] || data['salaryBase'] || data['salaryAssessment'] || data['salaryPost'] || data['salaryAllowance']) {
          this.tabsSelectedId = '6'
        }
      },
      handleRemovePhoto(index) { // 删除简历照片附件(2寸)
        this.editInfo.photoInstance.splice(index, 1)
        this.editInfo.data.photoListData.splice(index, 1)
      },
      handleRemoveIdPhoto(index) { // 删除证件照片附件
        this.editInfo.idPhotoInstance.splice(index, 1)
        this.editInfo.data.idPhotoListData.splice(index, 1)
      },
      handleRemoveCertLeave(index) { // 删除离职证明附件
        this.editInfo.certLeaveInstance.splice(index, 1)
        this.editInfo.data.certLeaveListData.splice(index, 1)
      },
      handleExportCertLeave(data) { // 导出离职证明
        this.$emit('on-export', {
          name: this.certLeaveName,
          fileName: data
        })
      },
      handleRemoveLaborContract(index) { // 删除劳务合同附件
        this.editInfo.laborContractInstance.splice(index, 1)
        this.editInfo.data.laborContractListData.splice(index, 1)
      },
      handleExportLaborContract(data) { // 导出劳务合同
        this.$emit('on-export', {
          name: this.laborContractName,
          fileName: data
        })
      },
      handleRemoveResume(index) { // 删除个人简历附件
        this.editInfo.resumeInstance.splice(index, 1)
        this.editInfo.data.resumeListData.splice(index, 1)
      },
      handleExportResume(data) { // 导出个人简历
        this.$emit('on-export', {
          name: this.resumeName,
          fileName: data
        })
      },
      handleRemoveDiploma(index) { // 删除学位证书附件
        this.editInfo.diplomaInstance.splice(index, 1)
        this.editInfo.data.diplomaListData.splice(index, 1)
      },
      handleRemoveGraduationCertificat(index) { // 删除毕业证书附件
        this.editInfo.graduationCertificatInstance.splice(index, 1)
        this.editInfo.data.graduationCertificatListData.splice(index, 1)
      },
      handleRemoveOtherAccessory(index) { // 删除其他附件
        this.editInfo.otherAccessoryInstance.splice(index, 1)
        this.editInfo.data.otherAccessoryListData.splice(index, 1)
      },
      handleViewBigPic(data) { // 查看大图
        this.viewBigPicInfo.visible = true
        this.viewBigPicInfo.url = data
      },
      handleEditSubmit: debounce(function() { // 编辑，提交，防抖

        //add by yyf
        //为了防止用户修改金额，没有触发blur，直接点击其他tab页的情况，做一个双保险
        try {
          this.computeMoney()
        } catch (e) {
          this.$notify.error({
            title: '错误',
            message: '保存失败，原因可能是社保信息填写不正确，请验证字段是否填写完整！'
          })
        }
        this.$refs['editInfo'].validate((valid, object) => {
          //console.log(this.editInfo.data)

          //单独处理省市
          /*let socialInsurancePlace = JSON.parse(JSON.stringify(this.editInfo.data.socialInsurancePlace))
          if (socialInsurancePlace[2]) {
            this.editInfo.data.socialInsurancePlace = socialInsurancePlace[0] + '-' + socialInsurancePlace[1] + '-' + socialInsurancePlace[2]
          } else if (socialInsurancePlace[1]) this.editInfo.data.socialInsurancePlace = socialInsurancePlace[0] + '-' + socialInsurancePlace[1]*/

          this.editInfo.securityBase = '1'

          if (valid) {
            if (this.editInfo.id) {
              this.updateData()
            } else {
              this.createData()
            }
          } else {
            //如果验证不通过，就自动跳到有问题的tab页
            this.handleTabChange(object)
          }
          //重置地区
          //this.editInfo.data.socialInsurancePlace = socialInsurancePlace
        })
      }, 300),

      async initSheBaoAddr() {
        //加载社保缴纳地的树结构
        /* let response = await findAllProvince({})
         let result = response
         console.log('加载社保缴纳地的树结构', result.data)
         this.propsSocialInsurancePlace = result.data*/
      },

      async createData() { // 添加－请求数据
        try {
          let { name } = this.editInfo.data
          let response = await createRecordAPI({
            ...this.editInfo.data,
            ...{
              name: name.trim()
            }
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$notify({
              title: '成功',
              message: '添加成功！',
              type: 'success',
              duration: 2000
            })
            this.$emit('create')
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '添加失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '添加失败！'
          })
        }
      },
      async updateData() { // 修改－请求数据
        try {
          //console.log(this.editInfo.data);
          let { name } = this.editInfo.data
          let response = await updateRecordAPI({
            ...this.editInfo.data,
            ...{
              id: this.editInfo.id,
              name: name.trim()
            }
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('update')
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '编辑失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '编辑失败！'
          })
        }
      },
      async initUpload() { // 初始化上传
        if (this.editInfo.resumeInstance) this.editInfo.resumeInstance.destroy()
        if (this.editInfo.certLeaveInstance) this.editInfo.certLeaveInstance.destroy()
        if (this.editInfo.laborContractInstance) this.editInfo.laborContractInstance.destroy()
        if (this.editInfo.idPhotoInstance) this.editInfo.idPhotoInstance.destroy()
        if (this.editInfo.diplomaInstance) this.editInfo.diplomaInstance.destroy()
        if (this.editInfo.graduationCertificatInstance) this.editInfo.graduationCertificatInstance.destroy()
        if (this.editInfo.otherAccessoryInstance) this.editInfo.otherAccessoryInstance.destroy()
        if (this.editInfo.photoInstance) this.editInfo.photoInstance.destroy()
        this.$nextTick(() => {
          // 二寸照片初始化
          this.initPlupload({
            container: 'photo-box',
            selectFiles: 'upload-photo',
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.photoInstance = instance
            this.editInfo.photoInstance.init()
            this.editInfo.photoInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.photoListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 证件照片初始化
          this.initPlupload({
            container: 'idPhoto-box',
            selectFiles: 'upload-idPhoto',
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.idPhotoInstance = instance
            this.editInfo.idPhotoInstance.init()
            this.editInfo.idPhotoInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.idPhotoListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 离职证明初始化
          this.initPlupload({
            container: 'certLeave-box',
            selectFiles: 'upload-certLeave',
            mimeTypes: [
              { title: 'Word files', extensions: 'doc,docx' },
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.certLeaveInstance = instance
            this.editInfo.certLeaveInstance.init()
            this.editInfo.certLeaveInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.certLeaveListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 个人简历初始化
          this.initPlupload({
            container: 'resume-box',
            selectFiles: 'upload-resume',
            mimeTypes: [
              { title: 'Word files', extensions: 'doc,docx' },
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.resumeInstance = instance
            this.editInfo.resumeInstance.init()
            this.editInfo.resumeInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.resumeListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 劳务合同初始化
          this.initPlupload({
            container: 'laborContract-box',
            selectFiles: 'upload-laborContract',
            mimeTypes: [
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.laborContractInstance = instance
            this.editInfo.laborContractInstance.init()
            this.editInfo.laborContractInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.laborContractListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 学位证书初始化
          this.initPlupload({
            container: 'diploma-box',
            selectFiles: 'upload-diploma',
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.diplomaInstance = instance
            this.editInfo.diplomaInstance.init()
            this.editInfo.diplomaInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.diplomaListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 毕业证书初始化
          this.initPlupload({
            container: 'graduationCertificat-box',
            selectFiles: 'upload-graduationCertificat',
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.graduationCertificatInstance = instance
            this.editInfo.graduationCertificatInstance.init()
            this.editInfo.graduationCertificatInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.graduationCertificatListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 其他附件初始化
          this.initPlupload({
            container: 'otherAccessory-box',
            selectFiles: 'upload-otherAccessory',
            employee: this.editInfo.data
          }).then((instance) => {
            this.editInfo.otherAccessoryInstance = instance
            this.editInfo.otherAccessoryInstance.init()
            this.editInfo.otherAccessoryInstance.bind('handleAddFile', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.otherAccessoryListData.push(fileInfo)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
        })
      },
      async resetEditData(data = null) { // 重置编辑表单
        this.tabsSelectedId = '1'
        this.dialog.status = data ? 'update' : 'create'
        this.dialog.title = data ? '编辑' : '添加'
        // this.dialog.visible = true
        this.editInfo.id = undefined
        this.editInfo.disabled = false

        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))

        if (data) { // 编辑

          request({
            url: '/hr/employee/' + data.id,
            method: 'get',
            params: {}
          }).then(response => {
            console.log('response======>', response)
            if (response.code != '200') {
              this.msgError('后台请求出错，原因是' + response.msg)
              return
            }
            data = response.data
            // this.editInfo.id = data.uuid
            this.editInfo.id = data.id
            Object.keys(this.formParams).forEach((item) => {
              this.editInfo.data[item] = data[item]
            })

            this.editInfo.data.contractYear = data['contractYear'] && data['contractYear'].toString() || ''

            this.editInfo.data.photoListData = this.filesToArray(this.editInfo.data.photoUrl)
            this.editInfo.data.idPhotoListData = this.filesToArray(this.editInfo.data.idPhotoUrl)
            this.editInfo.data.certLeaveListData = this.filesToArray(this.editInfo.data.certLeaveUrl)
            this.editInfo.data.resumeListData = this.filesToArray(this.editInfo.data.resumeUrl)
            this.editInfo.data.laborContractListData = this.filesToArray(this.editInfo.data.laborContractUrl)
            this.editInfo.data.diplomaListData = this.filesToArray(this.editInfo.data.diplomaUrl)
            this.editInfo.data.graduationCertificatListData = this.filesToArray(this.editInfo.data.graduationCertificatUrl)
            this.editInfo.data.otherAccessoryListData = this.filesToArray(this.editInfo.data.otherAccessoryUrl)
            this.editInfo.disabled = true

            console.log('this.editInfo.data.businessInsuranceBegin======>', this.editInfo.data.businessInsuranceBegin)

          })

        }
      },

      async initEditDialog(data = null) { // 编辑－显示弹出框
        let params = JSON.parse(JSON.stringify(data)) //深度拷贝，解决因为点击编辑按钮改变row的社保地址的bug
        await this.resetEditData(params)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      },

      computeMoney() {
        let {
          endowmentInsuranceP = 0,
          medicalInsuranceP = 0,
          inductrialInjuryInsuranceP = 0,
          unemploymentInsuranceP = 0,
          birthInsuranceP = 0,
          seriousIllnessInsuranceP = 0,
          housingProvidentFundP = 0,
          endowmentInsuranceE = 0,
          medicalInsuranceE = 0,
          inductrialInjuryInsuranceE = 0,
          unemploymentInsuranceE = 0,
          birthInsuranceE = 0,
          seriousIllnessInsuranceE = 0,
          housingProvidentFundE = 0,
          securityCharge = 0,
          endowmentInsuranceBase = 0,
          medicalInsuranceBase = 0,
          inductrialInjuryInsuranceBase = 0,
          unemploymentInsuranceBase = 0,
          birthInsuranceBase = 0,
          housingProvidentFundBase = 0

        } = this.editInfo.data

        //比例-企业
        let ebirth = this.ebirth || 0
        let ehousing = this.ehousing || 0
        let einjury = this.einjury || 0
        let eloseJob = this.eloseJob || 0
        let emedical = this.emedical || 0
        let epension = this.epension || 0

        //比例-个人
        let phousing = this.phousing || 0
        let pinjury = this.pinjury || 0
        let pmedical = this.pmedical || 0
        let ploseJob = this.ploseJob || 0
        let ppension = this.ppension || 0
        let pbirth = this.pbirth || 0

        securityCharge = securityCharge || 0

        //seriousIllnessInsuranceP = seriousIllnessInsuranceP || 0

        //社保费用
        endowmentInsuranceP = endowmentInsuranceP || 0
        medicalInsuranceP = medicalInsuranceP || 0
        inductrialInjuryInsuranceP = inductrialInjuryInsuranceP || 0
        unemploymentInsuranceP = unemploymentInsuranceP || 0
        birthInsuranceP = birthInsuranceP || 0
        housingProvidentFundP = housingProvidentFundP || 0

        endowmentInsuranceE = endowmentInsuranceE || 0
        medicalInsuranceE = medicalInsuranceE || 0
        inductrialInjuryInsuranceE = inductrialInjuryInsuranceE || 0
        unemploymentInsuranceE = unemploymentInsuranceE || 0
        birthInsuranceE = birthInsuranceE || 0
        housingProvidentFundE = housingProvidentFundE || 0

        /*console.log('重新计算个人养老保险:' + ppension + '*' + endowmentInsuranceBase)
        console.log('重新计算企业养老保险:' + epension + '*' + endowmentInsuranceBase)*/

        this.editInfo.data.endowmentInsuranceP = this.formatNumber({
          formula: `${endowmentInsuranceBase}*${ppension}`
        })
        this.editInfo.data.endowmentInsuranceE = this.formatNumber({
          formula: `${endowmentInsuranceBase}*${epension}`
        })

        this.editInfo.data.medicalInsuranceP = this.formatNumber({
          formula: `${medicalInsuranceBase}*${pmedical}`
        })
        this.editInfo.data.inductrialInjuryInsuranceP = this.formatNumber({
          formula: `${inductrialInjuryInsuranceBase}*${pinjury}`
        })
        this.editInfo.data.unemploymentInsuranceP = this.formatNumber({
          formula: `${unemploymentInsuranceBase}*${ploseJob}`
        })
        this.editInfo.data.birthInsuranceP = this.formatNumber({
          formula: `${birthInsuranceBase}*${pbirth}`
        })
        this.editInfo.data.housingProvidentFundP = this.formatNumber({
          formula: `${housingProvidentFundBase}*${phousing}`
        })

        this.editInfo.data.medicalInsuranceE = this.formatNumber({
          formula: `${medicalInsuranceBase}*${emedical}`
        })
        this.editInfo.data.inductrialInjuryInsuranceE = this.formatNumber({
          formula: `${inductrialInjuryInsuranceBase}*${einjury}`
        })
        this.editInfo.data.unemploymentInsuranceE = this.formatNumber({
          formula: `${unemploymentInsuranceBase}*${eloseJob}`
        })
        this.editInfo.data.birthInsuranceE = this.formatNumber({
          formula: `${birthInsuranceBase}*${ebirth}`
        })
        this.editInfo.data.housingProvidentFundE = this.formatNumber({
          formula: `${housingProvidentFundBase}*${ehousing}`
        })

        //更新费用

        //console.log(`${endowmentInsuranceBase}*${epension}+${medicalInsuranceBase}*${emedical}+${inductrialInjuryInsuranceBase}*${einjury}+${unemploymentInsuranceBase}*${eloseJob}+${birthInsuranceBase}*${ebirth}+${housingProvidentFundBase}*${ehousing}`);

        //个人合计
        this.editInfo.data.securityHousingPersonal = this.formatNumber({
          formula: `${this.editInfo.data.endowmentInsuranceP}  + ${this.editInfo.data.medicalInsuranceP} + ${this.editInfo.data.inductrialInjuryInsuranceP} + ${this.editInfo.data.unemploymentInsuranceP}  + ${this.editInfo.data.birthInsuranceP} + ${this.editInfo.data.housingProvidentFundP}`
        })

        //企业合计
        this.editInfo.data.securityHousingEnterprise = this.formatNumber({
          formula: `${this.editInfo.data.endowmentInsuranceE}  + ${this.editInfo.data.medicalInsuranceE} + ${this.editInfo.data.inductrialInjuryInsuranceE} + ${this.editInfo.data.unemploymentInsuranceE}  + ${this.editInfo.data.birthInsuranceE} + ${this.editInfo.data.housingProvidentFundE}`
        })

        this.editInfo.data.securityHousingSum = this.formatNumber({
          formula: `${this.editInfo.data.securityHousingPersonal}+${this.editInfo.data.securityHousingEnterprise}+${securityCharge}`
        })
      }
    },
    watch: {

      'editInfo.data.socialInsurancePlace': {
        handler: function(val) {
          if (!val) return
          getArea(val).then(response => {
            //console.log(response.data);
            this.ebirth = response.data.ebirth
            this.ehousing = response.data.ehousing
            this.einjury = response.data.einjury
            this.eloseJob = response.data.eloseJob
            this.emedical = response.data.emedical
            this.epension = response.data.epension
            this.pbirth = response.data.pbirth
            this.phousing = response.data.phousing
            this.pinjury = response.data.pinjury
            this.pmedical = response.data.pmedical
            this.ploseJob = response.data.ploseJob
            this.ppension = response.data.ppension
            this.computeMoney()
          })
        },
        immediate: true
      },

      visible(newVal, oldVal) {
        console.log(this.detailData)
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initEditDialog(this.detailData)
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      },
      tabsSelectedId(newVal, oldVal) {
        if (newVal === '5') {
          let { name, phone } = this.editInfo.data
          if (!name || !phone) {
            this.$notify.warning({
              title: '警告',
              message: '上传附件前必须输入姓名和电话！'
            })
          }
          this.initUpload()
        }
      },
      'editInfo.data.photoListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.photoUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.idPhotoListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.idPhotoUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.certLeaveListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.certLeaveUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.resumeListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.resumeUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.laborContractListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.laborContractUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.diplomaListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.diplomaUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.graduationCertificatListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.graduationCertificatUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.otherAccessoryListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.otherAccessoryUrl = this.filesToString(newVal)
        },
        deep: true
      }
    },
    created() {
      this.initSheBaoAddr()
      /*try {
        this.getTreeselect().then(response => {
          this.areaOptions = response.data
        })
      } catch (e) {
      }*/

    },
    mounted() {
      this.getDicts('nation').then(response => {
        this.nationOptions = response.data
      })

    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }
  }

  .editInfo {
    margin-right: 0;

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
